<template>
    <div class="content-wrapper">

      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1>
          营销管理
        </h1>

        <ol class="breadcrumb">
          <li><a href="#"> 控制台</a></li>
          <li><a href="#">客户开发计划</a></li>
          <li class="active">定制计划</li>
        </ol>
      </section>

      <!-- Main content -->
      <section class="content">
          <div class="row">
              <div class="col-xs-12">
                  <div class="box box-solid">
                      <div class="box-body">
                          <button class="btn btn-primary btn-sm" @click="customDevResult(1)">开发成功</button> <button class="btn btn-danger btn-sm" @click="customDevResult(0)">开发失败</button>
                      </div>
                  </div>
              </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
                <div class="box box-solid">
                    <div class="box-header with-border">
                      <h3 class="box-title">客户信息</h3>
                    </div>
                  <!-- /.box-header -->
                  <!-- form start -->
                  <form class="form-horizontal">
                    <div class="box-body">
                        <div class="row">
                            <div class="form-group col-sm-6">
                              <label class="col-sm-2 control-label">客户名称</label>
                              <div class="col-sm-10">
                                <input name="custom_name" class="form-control" v-model="custom_name" readonly>
                              </div>
                            </div>
                            <div class="form-group col-sm-6">
                              <label  class="col-sm-2 control-label">联系人</label>
                              <div class="col-sm-10">
                                <input class="form-control" name="contact_name" v-model="contact_name" readonly>
                              </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-sm-6">
                              <label  class="col-sm-2 control-label">联系电话</label>
                              <div class="col-sm-10">
                                <input class="form-control" name="contact_mobile" v-model="contact_mobile" readonly>
                              </div>
                            </div>
                            <div class="form-group col-sm-6">
                              <label class="col-sm-2 control-label">机会来源</label>
                              <div class="col-sm-10">
                                <input class="form-control" name="origin" v-model="origin" readonly>
                              </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-sm-6">
                              <label class="col-sm-2 control-label">合作意向</label>
                              <div class="col-sm-10">
                                <input class="form-control" name="intention" v-model="intention" readonly>
                              </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-sm-6">
                              <label  class="col-sm-2 control-label">创建人</label>
                              <div class="col-sm-10">
                                <input class="form-control" :value="user_name" readonly>
                              </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <label  class="col-sm-2 control-label">创建时间</label>
                                <div class="col-sm-10">
                                  <input class="form-control" readonly v-model="created_at">
                                </div>
                           </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-sm-6">
                              <label  class="col-sm-2 control-label">指派给</label>
                              <div class="col-sm-10">
                                <input class="form-control" :value="assign_user_name" readonly>
                              </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <label  class="col-sm-2 control-label">指派时间</label>
                                <div class="col-sm-10">
                                  <input class="form-control" readonly v-model="assign_date">
                                </div>
                           </div>
                        </div>

                    </div>
                    <!-- /.box-body -->
                  </form>
                </div>
              <!-- /.box -->
            </div>
          </div>


          <div class="row">
            <div class="col-xs-12">
                <div class="box box-solid">
                    <div class="box-header with-border">
                      <h3 class="box-title">开发计划</h3>
                    </div>
                  <!-- /.box-header -->
                  <!-- form start -->
                  <!-- /.box-body -->
                  <div class="box-body">
                      <table class="table table-bordered">
                        <thead>
                        <tr>
                          <th style="width:150px;">日期</th>
                          <th>计划内容</th>
                          <th>执行结果</th>
                          <th style="width:150px;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="plan in plan_list" :id="'row_'+plan.id">
                          <td><input class="form-control" :value="plan.plan_date" readonly> </td>
                          <td><input class="form-control" :value="plan.plan_content" readonly></td>
                          <td><input class="form-control" placeholder="执行的结果怎" v-model="plan.result"></td>
                          <td><a class="btn btn-primary" @click="updateModel(plan)">保存</a> <a class="btn btn-danger" @click="deleteModel(plan.id)">删除</a></td>
                        </tr>

                        </tbody>
                      </table>
                  </div>
                    <div class="box-footer">
                        <table class="table table-bordered">
                          <thead>
                          <tr>
                            <th style="width:150px;">日期</th>
                            <th>计划内容</th>
                            <th style="width:150px;">操作</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr>
                            <td>
                                <datepicker v-model="plan_date" :not-before="new Date()" placeholder="点击选择时间" input-class="form-control"></datepicker>
                                <span style="color:red" v-if="errors.has('plan_date')">{{errors.first('plan_date')}}</span>
                            </td>
                            <td>
                                <input class="form-control" v-validate="'required|max:100'" name="plan_content" placeholder="100字以内，描述如何拜和接触访客户" v-model="plan_content">
                                <span style="color:red" v-if="errors.has('plan_content')">{{errors.first('plan_content')}}</span>
                            </td>
                            <td><a class="btn btn-primary" @click="submit">新增</a></td>
                          </tr>
                          </tbody>
                        </table>

                    </div>

                </div>
              <!-- /.box -->
            </div>
          </div>




      </section>
      <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
</template>

<script>

import SaleIntention from '@/modules/SaleIntention'
import CustomDevPlan from '@/modules/CustomDevPlan'

// https://www.npmjs.com/package/vue2-datepicker
import DatePicker from 'vue2-datepicker'
export default {

    mounted() {
        if(this.$route.params.id > 0){
            this.loadModel();
        }
    },

    data() {
        return {
            custom_name:'',
            contact_name:'',
            contact_mobile:'',
            origin:'',
            intention:'',
            user_name:'',
            assign_user_name:'',
            assign_date:'',
            created_at:'',

            //新增表单
            plan_date:new Date(),
            datepicker_config:{
                format: 'YYYY-MM-DD',
                useCurrent:false,
                showClear: true,
                showClose: true
            },
            plan_content:'',

            //计划列表
            plan_list:[],


        };
    },

    methods: {
        loadModel() {
            SaleIntention.show(this.$route.params.id)
            .then((response) => {
                var model = response.contents;
                this.custom_name = model.custom_name;
                this.contact_name = model.contact_name;
                this.contact_mobile = model.contact_mobile;
                this.origin = model.origin;
                this.intention = model.intention;
                this.created_at = model.created_at;
                this.user_name = model.user.name;
                this.assign_user_name = model.assign_user.name;
                this.assign_date = model.assign_date;
                return CustomDevPlan.list({sale_intention_id:this.$route.params.id});
            })
            .then((response) => {
                this.plan_list = response.contents;
            });
        },

        submit() {
            this.$validator.validateAll().then((result) => {
                if(result){
                    if(this.plan_date == ''){
                        $.message({
                            message:'请设置时间',
                            type:'warning'
                        });
                        return;
                    }
                    var params = {
                        sale_intention_id:this.$route.params.id,
                        plan_date:this.plan_date.getFullYear() + "-" + this.plan_date.getMonth()+1 + "-" + this.plan_date.getDate(),
                        plan_content:this.plan_content
                    };
                    CustomDevPlan.store(params)
                    .then((response) => {
                        // this.plan_date = new Date(),
                        this.plan_content = '';
                        this.plan_list.push({
                            id:response.contents.id,
                            plan_date:params.plan_date,
                            plan_content:params.plan_content,
                            result:''
                        });
                        $.message('操作成功');
                    });
                }

            });
        },

        updateModel(plan) {
            if(plan.result == ''){
                alert('请填写执行结果');
                return;
            }
            CustomDevPlan.put(plan.id,{result:plan.result})
            .then((response) => {
                $.message('操作成功');
            });
        },

        deleteModel(id) {
            if(!confirm('确认删除吗?')){
                return;
            }
            CustomDevPlan.delete(id)
            .then((response) => {
                $.message('操作成功');
                $('#row_'+id).fadeOut();
            });
        },

        customDevResult(result){
            if(!confirm('确认操作吗,此操作不可以回退?')){
                return;
            }
            SaleIntention.customDevResult(this.$route.params.id,result)
            .then((response) => {
                $.message('操作成功');
                this.$router.push({name:'CustomDevIndex'});
            });
        }
    },

    computed:{

    },

    components:{
        'datepicker': DatePicker
    }
}
</script>

<style lang="css">
</style>
